{% extends "layout.html" %}                #通过这句话，来进行继承挂钩，和主体base.html进行链接
{% block content %}
	<style type="text/css">
		body{position: relative;background-size: cover;background-position: top right;}
		@media screen and (max-width: 500px) {
			body{
				background-image:none;
				background-color: #d4d3cf;
			}
			.layui-container{padding-top: 0;}
			.form-wrap{margin-top: 0px !important;}
			.slogen{font-size: 22px;}
		}
		
		.form-wrap{position: relative;padding-bottom: 30px;width: 528px;margin-top: 20px;min-height: 550px;background-color: #fff;font-size: 12px;border-color: 1px solid #ddd;}
		.form-wrap input{margin-top: 5px;}
		.form-wrap .layui-form-label{display: block;width: 100%;padding: 0;padding-left: 0;padding-bottom: 0;text-align: left;float: none;}
		.form-wrap .layui-form-item{margin-bottom: 0px;}
		.layui-input{width: 86%;}
		.highlight{border: 1px solid red !important;}
		.button-wrap{display: block;position: absolute;bottom: 30px;width: 100%;left: 0;padding-top: 10px;}
		.layui-form-checkbox{width: 10px;height: 10px;}
		.layui-form-checkbox i{width: 10px;height: 10px;}
		.field-item{margin-bottom: 3px;position: relative;}
		.field-item::after{content:'';height: 0;clear: both;visibility: none;display: block;zoom: 1;}
		.field-item > div{line-height: 38px;}
		.field-item > div label{display: inline-block;vertical-align: middle;}
		.field-item > div:nth-child(1){height: 40px;line-height: 40px; padding-top: 0px;vertical-align: middle;display: table-cell;vertical-align:middle;font-size: 14px;}
		.field-item > div:nth-child(3){padding-top: 10px;}
		.input-group input{display: inline-block;width: 30px;height: 30px;border: 1px solid #ccc;margin-left: 5px;text-align: center;}
		.phone-group input{width: 23px;margin-left: 4px;}
		.layui-carousel{position: absolute;top: 80px;left: 0;width: 100%;}
		.red-star{font-size: 20px; color: red;line-height: 10px;vertical-align: middle;}
		.form-wrap input{border-color: #A4A7AE;}
		.service-list{font-size: 0;}
		.service-list li:nth-child(3n+1){margin-left: 0;}
		.service-list li{display: inline-block;width: 380px;height: 280px;background-color: #fff;border-radius: 8px;font-size: 14px;margin-left: 30px;margin-bottom: 30px;vertical-align: top;}
		.service-list li a{display: block;text-align: center;}
		.service-list li a .ser-img-wrap{display: inline-block; width: 120px;height: 120px;border-radius: 50%;margin: 32px 0 30px;}
		.service-list li a img{width: 78px;margin-top: 16px;}
		.service-list li a .ser-tit{color: #2D2D2D;font-size: 16px;}
		.service-list li a .ser-desc{color: #C1C2C3;font-size: 12px;padding: 5px 0 16px;}
		.service-list li a .ser-more{color: #2674A8;font-size: 14px;}
		.layui-input{width: 100%;}
		.back-btn{background-color: #fff !important;color: #666 !important;}
		@media screen and (max-width: 500px){
			.footer{position:relative !important;}}
		}
	</style>
	<link rel="stylesheet" type="text/css" href="https://d3s6yopk5rlhed.cloudfront.net/static/css/jquery-ui.min.css">
	<div class="layui-carousel" id="test1">
	  <div carousel-item>
	    <div class="slide-item slide-item1" style="background-image: url(https://d3s6yopk5rlhed.cloudfront.net/static/images/banner01.jpg);background-size: cover;background-origin:center center;background-position: center center;"><!-- <img src=""> --></div>
	    <div class="slide-item slide-item2" style="background-image: url(https://d3s6yopk5rlhed.cloudfront.net/static/images/banner02.jpg);background-size: cover;background-origin:center center;background-position: center center;"><!-- <img src=""> --></div>
	    <div class="slide-item slide-item3" style="background-image: url(https://d3s6yopk5rlhed.cloudfront.net/static/images/banner3.jpg);background-size: cover;background-origin:center center;background-position: center center;"><!-- <img src=""> --></div>
	  </div>
	</div>
	<div class="bg-center" style="min-height: 600px;">
		<div class="layui-container wrap tr" id="app">
			<div class="form-wrap tl inline-block">
				<div class="slogen tc f12" style="font-weight: 700;height: 56px;line-height: 56px;color: #2674A8;font-size: 22px;background-color: #E4E6E8;">Best Private Financing Platform</div>
				<form class="layui-form" id="customer-form" action="" style="padding: 25px;">
					<div class="step-1" v-show="step == 1">
						<!-- <label class="step-des">Step 1,Personal information</label> -->
						<div class="field-item">
							<div class="layui-col-md4"><span class="red-star">*</span>First Name</div>
							<div class="layui-col-md8">
								<input type="text" name="first_name" placeholder="Susan" autocomplete="off" class="validate[required] layui-input" data-prompt-position="topLeft">
							</div>
						</div>
						<div class="field-item">
							<div class="layui-col-md4"><span class="red-star">*</span>Last Name</div>
							<div class="layui-col-md8">
								<input type="text" name="last_name" placeholder="Williams" autocomplete="off" class="validate[required] layui-input" data-prompt-position="topLeft">
							</div>
						</div>
						<div class="field-item">
							<div class="layui-col-md4">
								<span class="red-star">*</span>Your Birthdate
							</div>
							<div class="layui-col-md8" style="position: relative;">
								<input type="text" name="your_birthdate" placeholder="YYYY-MM-DD" autocomplete="off" class="validate[required] layui-input" id="your-birthdate" style="background: url(static/images/1_HOME_date.jpg) no-repeat;background-position: 97% 8px;">
							</div>
						</div>
						<div class="field-item">
							<div class="layui-col-md4"><span class="red-star">*</span>Phone Number</div>
							<div class="layui-col-md8">
								<div class="input-group phone-group">(<input type="number" placeholder="0"><input type="number" placeholder="8"><input type="number" placeholder="1"> )<input type="number" placeholder="1"><input type="number" placeholder="2"><input type="number" placeholder="3">—<input type="number" placeholder="4"><input type="number" placeholder="2"><input type="number" placeholder="6"><input type="number" placeholder="3">
								</div>
								<input style="display: none;" type="text" name="phone_number" placeholder="" autocomplete="off" class="validate[required] layui-input" data-prompt-position="topLeft">
							</div>
						</div>
						<div class="field-item">
							<div class="layui-col-md4"><span class="red-star">*</span>Email Address</div>
							<div class="layui-col-md8">
								<input type="text" name="email_address" placeholder="Example@company.com" autocomplete="off" class="layui-input" data-prompt-position="topLeft">
							</div>
						</div>
						<div class="field-item">
							<div class="layui-col-md4"><span class="red-star">*</span>Property Postal Code</div>
							<div class="layui-col-md8">
								<div class="input-group post-code">
									<input type="" name="" placeholder="A">
									<input type="" name="" placeholder="1">
									<input type="" name="" placeholder="A">
									&nbsp;&nbsp;&nbsp;&nbsp;
									<input type="" name="" placeholder="1">
									<input type="" name="" placeholder="A">
									<input type="" name="" placeholder="1">
								</div>
								<input style="display: none;" type="text" name="property_post_code" placeholder="M4J0A4" autocomplete="off" class="validate[required] layui-input" data-prompt-position="topLeft">
							</div>
						</div>
						<div class="field-item">
							<div class="layui-col-md4"><span class="red-star">*</span>Property Address</div>
							<div class="layui-col-md8" style="">
								<input type="text" name="property_address" placeholder="" autocomplete="off" class="validate[required] layui-input">
							</div>
						</div>
						<div class="field-item">
							<div class="layui-col-md6"><span class="red-star">*</span>Do you own this property?</div>
							<div class="layui-col-md6" style="text-align: center;">
								<input type="radio" name="is_own_this_property" value="1" title="Yes">
								&nbsp;&nbsp;&nbsp;&nbsp;
							    <input type="radio" name="is_own_this_property" value="0" title="No" checked>
							</div>
						</div>
						<div id="optips-wrap" style="width: 90%;padding-top: 3px;color: red;"></div>
						<div class="field-item">
							<div class="layui-col-md6"><span class="red-star">*</span>Is this your Primary Residence?</div>
							<div class="layui-col-md6" style="text-align: center;">
								<input type="radio" name="is_primary_residence" value="1" title="Yes">
								&nbsp;&nbsp;&nbsp;&nbsp;
							    <input type="radio" name="is_primary_residence" value="0" title="No" checked>
							</div>
						</div>
						<div class="field-item">
							<div class="layui-col-md7"><span class="red-star">*</span>How Many Years Have You Lived Here?</div>
							<div class="layui-col-md5">
								<input style="width: 198px;" type="text" name="years_lived_here" placeholder="0" autocomplete="off" class="validate[required] layui-input" onkeyup="this.value=this.value.replace(/\D/g,'');this.value= (this.value > 99?99:this.value);" onafterpaste="this.value=this.value.replace(/\D/g,'')">
							</div>
						</div>
						<div class="blank" style="height: 50px;"></div>
						<div class="layui-form-item tc button-wrap" style="margin-top: 20px;">
						  	<button style=" width: 30%;" type="button" class="layui-btn layui-btn-primary" @click="next">NEXT</button>
						    <!-- <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
						    <button type="reset" class="layui-btn layui-btn-primary">重置</button> -->
						</div>
					</div>
					<div class="step-2" v-show="step == 2">
						<div class="field-item">
							<div class="layui-col-md7"><span class="red-star">*</span>Property Estimated Value</div>
							<div class="layui-col-md8">
								<input type="text" name="property_estimated_value" placeholder="1,000,000" autocomplete="off" class="validate[required] layui-input">
							</div>
						</div>
						<!-- <label class="step-des">Step 2,Property information</label> -->
						<div class="field-item" style="padding-top: 6px;">
							<div class="layui-col-md6">
						  		<span class="red-star">*</span>Is there a rental component?
						  	</div>
						  	<div class="layui-col-md6">
							    <input type="radio" name="is_have_rental_component" value="1" title="Yes">
							    <input type="radio" name="is_have_rental_component" value="0" title="No" checked>
							</div>
						</div>
						<div class="field-item">
							<div class="layui-col-md7" style="">
								<span class="red-star">*</span>First Mortgage Balance (put 0 if none)
							</div>
							<div class="layui-col-md8">
								<input type="text" name="first_mortgage_balance" placeholder="" autocomplete="off" class="validate[required] number-format layui-input" onkeyup="this.value=this.value.replace(/\D/g,'');" onafterpaste="this.value=this.value.replace(/\D/g,'')">		
							</div>
						</div>
						<div class="field-item">
							<div class="layui-col-md12" style="">
						  		<span class="red-star">*</span>Do you have a second Mortgage on this property?
							</div>
							<div class="layui-col-md8">
								<input type="radio" name="is_have_second_mortgage" value="1" title="Yes">
								<input type="radio" name="is_have_second_mortgage" value="0" title="No" checked>
							</div>
						    <div id="smtips-wrap"></div>
						</div>
						<!-- <div class="layui-form-item">
						  <input type="text" name="how_much_like_borrow" placeholder="How much would you like to borrow?" autocomplete="off" class="layui-input">
						</div> -->
						<div class="field-item">
							<div class="layui-col-md8" style="">
						  		<span class="red-star">*</span>How much would you like to borrow?
							</div>
							<div class="layui-col-md8">
						  		<input type="text" name="how_much_like_borrow" placeholder="10,000" autocomplete="off" class="validate[required] layui-input" onkeyup="this.value=this.value.replace(/\D/g,'');" onafterpaste="this.value=this.value.replace(/\D/g,'')">
							</div>
						</div>
						<div id="hmtips-wrap" style="width: 90%;padding-top: 3px;"></div>

						<div class="field-item">
							<div class="layui-col-md8">
								<span class="red-star">*</span>When do you need the money?
							</div>
						  	<div class="layui-col-md8">
						  		<input type="text" name="when_needed" placeholder="YYYY-MM-DD" autocomplete="off" class="validate[required] layui-input" id="datepicker">
						  	</div>
						</div>
						<div id="wntips-wrap" style="width: 90%;padding-top: 3px;"></div>
						<div style="height: 3vw;"></div>
						<div class="layui-form-item tc button-wrap" style="margin-top: 80px;">
						  	<button style=" width: 30%;" type="button" class="layui-btn layui-btn-primary back-btn" @click="back">BACK</button>
						  	<button style=" width: 30%;" type="button" class="layui-btn layui-btn-primary" @click="next">NEXT</button>
						    <!-- <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
						    <button type="reset" class="layui-btn layui-btn-primary">重置</button> -->
						</div>
					</div>
					<div class="step-3" v-show="step == 3">
						<!-- <label class="step-des">Step 3a,Property information</label> -->
						<div class="field-item">
							<div class="layui-col-md5">
								<span class="red-star">*</span>Name of Your Employer 
							</div>
							<div class="layui-col-md7">
								<input type="text" name="name_of_employer" placeholder="susan" autocomplete="off" class="validate[required] layui-input">
							</div>
						</div>
						<div class="field-item">
							<div class="layui-col-md5">
								<span class="red-star">*</span>Years Worked Here
							</div>
							<div class="layui-col-md7">
								<input type="text" name="years_of_work" placeholder="0" autocomplete="off" class="validate[required] layui-input" onkeyup="this.value=this.value.replace(/\D/g,'');this.value= (this.value > 99?99:this.value);" onafterpaste="this.value=this.value.replace(/\D/g,'')">
							</div>
						</div>
						<div class="field-item">
							<div class="layui-col-md5">
								<span class="red-star">*</span>Job Title
							</div>
							<div class="layui-col-md7">
								<input type="text" name="job_title" placeholder="" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="field-item">
							<div class="layui-col-md5">
								<span class="red-star">*</span>Gross Annual Income
							</div>
							<div class="layui-col-md7">
								<input type="text" name="gross_annual_income" placeholder="50,000" autocomplete="off" class="validate[required] layui-input number-format" onkeyup="this.value=this.value.replace(/\D/g,'');" onafterpaste="this.value=this.value.replace(/\D/g,'')">
							</div>
						</div>
						<div class="field-item">
							<div class="layui-col-md5">
								<span class="red-star">*</span>Other Annual Income
							</div>
							<div class="layui-col-md7">
								<input type="text" name="other_annual_income" placeholder="0" autocomplete="off" class="validate[required] layui-input number-format" onkeyup="this.value=this.value.replace(/\D/g,'');" onafterpaste="this.value=this.value.replace(/\D/g,'')">
							</div>
						</div>
						<div class="field-item">
							<div class="layui-col-md8" style="margin-top: 10px;">
								<span class="red-star">*</span>Is there a co-applicant, or anyone else on title?
							</div>
							<div class="layui-col-md8">
								<input type="radio" name="is_have_co_applicant" value="1" title="Yes">
						    	<input type="radio" name="is_have_co_applicant" value="0" title="No" checked>
							</div>
						</div>
						<div class="blank" style="height: 10vw;"></div>
						<div class="layui-form-item tc button-wrap" style="margin-top: 140px;">
						  	<button style=" width: 30%;" type="button" class="layui-btn layui-btn-primary back-btn" @click="back">BACK</button>
						  	<button style=" width: 30%;" type="button" class="layui-btn layui-btn-primary" @click="next">NEXT</button>
						    <!-- <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
						    <button type="reset" class="layui-btn layui-btn-primary">重置</button> -->
						</div>
					</div>
					<div class="step-4" v-show="step == 4">
						<!-- <label class="step-des">Step 3b,Property information</label> -->
						<div class="field-item">
							<div class="layui-col-md6">
								<span class="red-star">*</span>First Name of co-applicant
							</div>
							<div class="layui-col-md6">
								<input type="text" name="first_name_c" placeholder="suan" autocomplete="off" class="validate[required] layui-input">
							</div>
						</div>
						<div class="field-item">
							<div class="layui-col-md6">
								<span class="red-star">*</span>Last Name of co-applicant
							</div>
							<div class="layui-col-md6">
								<input type="text" name="last_name_c" placeholder="Williams" autocomplete="off" class="validate[required] layui-input">
							</div>
						</div>
						<div class="field-item">
							<div class="layui-col-md6">
								<span class="red-star">*</span>Co-applicant's Birthdate
							</div>
							<div class="layui-col-md6">
								<input type="text" name="co_application_birthdate" placeholder="YYYY-MM-DD" autocomplete="off" class="validate[required] layui-input" id="co-application-birthdate" style="background: url(static/images/1_HOME_date.jpg) no-repeat;background-position: 97% 8px;">
							</div>
						</div>
						<div class="field-item">
							<div class="layui-col-md6">
								<span class="red-star">*</span>Name of co-applicant Employer
							</div>
							<div class="layui-col-md6">
								<input type="text" name="name_of_employer_c" placeholder="" autocomplete="off" class="validate[required] layui-input">		
							</div>
						</div>
						<div class="field-item">
							<div class="layui-col-md6">
								<span class="red-star">*</span>Years Worked Here
							</div>
							<div class="layui-col-md6">
								<input type="text" name="years_of_work_c" placeholder="" autocomplete="off" class="layui-input" onkeyup="this.value=this.value.replace(/\D/g,'');this.value= (this.value > 99?99:this.value);" onafterpaste="this.value=this.value.replace(/\D/g,'')">
							</div>
						</div>
						<div class="field-item">
							<div class="layui-col-md6">
								<span class="red-star">*</span>Job Title
							</div>
							<div class="layui-col-md6">
								<input type="text" name="job_title_c" placeholder="" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="field-item">
							<div class="layui-col-md6">
								<span class="red-star">*</span>Gross Annual Income
							</div>
							<div class="layui-col-md6">
								<input type="text" name="gross_annual_income_c" placeholder="50,000" autocomplete="off" class="validate[required] layui-input number-format" onkeyup="this.value=this.value.replace(/\D/g,'');" onafterpaste="this.value=this.value.replace(/\D/g,'')">
							</div>
						</div>
						<div class="field-item">
							<div class="layui-col-md6">
								<span class="red-star">*</span>Other Annual Income
							</div>
							<div class="layui-col-md6">
								<input type="text" name="other_annual_income_c" placeholder="0" autocomplete="off" class="validate[required] layui-input number-format" onkeyup="this.value=this.value.replace(/\D/g,'');" onafterpaste="this.value=this.value.replace(/\D/g,'')">
							</div>
						</div>

						<div class="blank" style="height: 10vw;"></div>
						<div class="layui-form-item tc button-wrap" style="margin-top:140px;">
						  	<button style=" width: 30%;" type="button" class="layui-btn layui-btn-primary back-btn" @click="back">BACK</button>
						  	<button style=" width: 30%;" type="button" class="layui-btn layui-btn-primary" @click="next">NEXT</button>
						    <!-- <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
						    <button type="reset" class="layui-btn layui-btn-primary">重置</button> -->
						</div>
					</div>
					<div class="step-5" v-show="step >= 5">
						<!-- <label class="step-des">Step 4,Property information</label> -->
						<p style="padding-bottom: 4px;">
							<span class="red-star">*</span>How will you pay back the principal?(Maximum 1000 characters)<br>
						</p>
						<textarea name="how_payback_principal" placeholder="" class="validate[required] layui-textarea"></textarea>
						<div style="height: 15px;"></div>
						<p><span class="red-star">*</span>How will you pay the interest?(Maximum 1000 characters)<br></p>
						<textarea style="margin-top: 10px;" name="how_pay_interest" placeholder="" class="validate[required] layui-textarea"></textarea>

						<div class="layui-form-item tc button-wrap" style="margin-top: 190px;">
						  	<button style=" width: 30%;" type="button" class="layui-btn layui-btn-primary back-btn" @click="back">BACK</button>
						  	<button style=" width: 30%;" type="button" class="layui-btn layui-btn-primary" @click="next">NEXT</button>
						    <!-- <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
						    <button type="reset" class="layui-btn layui-btn-primary">重置</button> -->
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
	<div class="wrap">
		<div class="tc index-our-service" style="margin-top: 124px;">
			<h3 style="color:#18184A;font-size: 24px;font-weight: 700;">OUR SERVICES</h3>
			<p style="color: #18184A;opacity: .4;padding: 10px 0 20px;"><!-- Best private financing platform --></p>
		</div>
		<ul class="service-list" style="text-align: center;">
			<li>
				<a href="/PurchasingYourHome">
					<div class="ser-img-wrap" style="background-color: #EB6522;">
						<img class="ser-img" src="https://d3s6yopk5rlhed.cloudfront.net/static/images/1_HOME_services_01.png">
					</div>
					<p class="ser-tit">Purchasing Your Home</p>
					<p class="ser-desc">Mortgage policy is tightening. It becomes imposs...</p>
					<span class="ser-more">Learn more</span>
				</a>
			</li>
			<li>
				<a href="/InvestmentRenovation">
					<div class="ser-img-wrap" style="background-color: #29AABD;">
						<img class="ser-img" src="https://d3s6yopk5rlhed.cloudfront.net/static/images/1_HOME_services_02.png">
					</div>
					<p class="ser-tit">Investment properties renovation</p>
					<p class="ser-desc">Home renovation is an excellent way to add value...</p>
					<span class="ser-more">Learn more</span>
				</a>
			</li>
			<li>
				<a href="/DebtConsolid">
					<div class="ser-img-wrap" style="background-color: #68AE4D;">
						<img class="ser-img" src="https://d3s6yopk5rlhed.cloudfront.net/static/images/1_HOME_services_03.png">
					</div>
					<p class="ser-tit">Debt Consolidation</p>
					<p class="ser-desc">Consolidating your high interest credit card debt...</p>
					<span class="ser-more">Learn more</span>
				</a>
			</li>
			<li>
				<a href="/LoanForBus">
					<div class="ser-img-wrap" style="background-color: #8B65B7;">
						<img class="ser-img" src="https://d3s6yopk5rlhed.cloudfront.net/static/images/1_HOME_services_04.png">
					</div>
					<p class="ser-tit">Loan For Business Captical</p>
					<p class="ser-desc">Do you need money for starting a new business...</p>
					<span class="ser-more">Learn more</span>
				</a>
			</li>
			<li>
				<a href="/LoanForSelf">
					<div class="ser-img-wrap" style="background-color: #5775A4;">
						<img class="ser-img" src="https://d3s6yopk5rlhed.cloudfront.net/static/images/1_HOME_services_05.png">
					</div>
					<p class="ser-tit">Loan for Other Needs</p>
					<p class="ser-desc">You need money and we are here. We know time is...</p>
					<span class="ser-more">Learn more</span>
				</a>
			</li>
			<li>
				<a href="/PurchasingYourHome">
					<img style="width: 120px;margin: 50px 0px 10px;" class="ser-img" src="https://d3s6yopk5rlhed.cloudfront.net/static/images/1_HOME_services_06.jpg"><br>
					<p class="ser-tit">View more</p>
				</a>
			</li>
		</ul>
	</div>
	<!-- <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script> -->
	<script type="text/javascript" src="https://d3s6yopk5rlhed.cloudfront.net/static/js/vue.min.js"></script>
	<!-- <script type="text/javascript" src=" http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>	 -->
	<!--<script type="text/javascript" src=" http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>-->
	<script type="text/javascript" src="https://d3s6yopk5rlhed.cloudfront.net/static/js/jquery.min.js"></script>
	<script type="text/javascript" src="https://d3s6yopk5rlhed.cloudfront.net/static/js/jquery-ui.min.js"></script>
	<script type="text/javascript">
	    function isMobile() {
	        var userAgentInfo = navigator.userAgent;
	        var Agents = ["Android", "iPhone",
	                    "SymbianOS", "Windows Phone",
	                    "iPad", "iPod"];
	        var flag = false;
	        for (var v = 0; v < Agents.length; v++) {
	            if (userAgentInfo.indexOf(Agents[v]) > 0) {
	                flag = true;
	                break;
	            }
	        }
	        return flag;
	    }
		function ajax(options) {
		    options = options || {};
		    options.type = (options.type || "GET").toUpperCase();
		    options.dataType = options.dataType || "json";
		    var params = formatParams(options.data);

		    //创建 - 非IE6 - 第一步
		    if (window.XMLHttpRequest) {
		        var xhr = new XMLHttpRequest();
		    } else { //IE6及其以下版本浏览器
		        var xhr = new ActiveXObject('Microsoft.XMLHTTP');
		    }

		    //接收 - 第三步
		    xhr.onreadystatechange = function () {
		        if (xhr.readyState == 4) {
		            var status = xhr.status;
		            if (status >= 200 && status < 300) {
		                options.success && options.success(xhr.responseText, xhr.responseXML);
		            } else {
		                options.fail && options.fail(status);
		            }
		        }
		    }

		    //连接 和 发送 - 第二步
		    if (options.type == "GET") {
		        xhr.open("GET", options.url + "?" + params, true);
		        xhr.send(null);
		    } else if (options.type == "POST") {
		        xhr.open("POST", options.url, true);
		        //设置表单提交时的内容类型
		        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		        xhr.send(params);
		    }
		}
		function formatMoney(s, type) {
		     if (/[^0-9\.]/.test(s))
		         return "0.00";
		     if (s == null || s == "null" || s == "")
		         return "0.00";
		     s = s.toString().replace(/^(\d*)$/, "$1.");
		     s = (s + "00").replace(/(\d*\.\d\d)\d*/, "$1");
		     s = s.replace(".", ",");
		     var re = /(\d)(\d{3},)/;
		     while (re.test(s))
		         s = s.replace(re, "$1,$2");
		     s = s.replace(/,(\d\d)$/, ".$1");
		     if (type == 0) {
		         var a = s.split(".");
		         if (a[1] == "00") {
		             s = a[0];
		         }
		     }
		     return s;
		 }
		//格式化参数
		function formatParams(data) {
		    var arr = [];
		    for (var name in data) {
		        arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
		    }
		    return arr.join('&');
		}
		layui.use('carousel', function(){
		  var carousel = layui.carousel;
		  //建造实例
		  carousel.render({
		    elem: '#test1'
		    ,width: '100%', //设置容器宽度
		    height: '750px',
		    arrow: 'none', //始终显示箭头
		    autoplay: true,
		    interval: 5000
		    //,anim: 'updown' //切换动画方式
		  });
		});
		layui.use('laydate',function(){
                        var laydate = layui.laydate;
						var myDate = new Date();
						myDate.setFullYear(myDate.getFullYear()-16);
						console.log(myDate);
						var myDateString = myDate.getFullYear() + "-" + (myDate.getMonth() + 1) + "-" + myDate.getDate();
						console.log(myDateString);
                        laydate.render({
                                elem: '#your-birthdate',
                                lang:'en',
                                //value: '2007-12-30',
								value:myDateString,
                                isInitValue: false,
                                //max:'2007-12-30'
								max:myDateString
                        }); 
                        laydate.render({
                                elem: '#co-application-birthdate',
                                lang:'en',
                                //value: '2007-12-30',
								value:myDateString,
                                isInitValue: false,
                                //max:'2007-12-30'
								max:myDateString
                        }); 
                        laydate.render({
                                elem: '#datepicker',
                                lang:'en',
                                min:new Date().Format("yyyy-MM-dd")
                        }); 
                }); 
		layui.use('form', function(){
		  var form = layui.form;
		  
		  //监听提交
		  form.on('submit(formDemo)', function(data){
		    //layer.msg(JSON.stringify(data.field));
		    console.log(data.field, '保存表单提交的数据');
		    ajax({
		    	url: '/save',
		    	type: 'post',
		    	data: data.field,
		    	success: function(ret) {
		    		console.log(ret, '保存表单返回的数据');
		    	}
		    });
		    return false;
		  });
		});
		
		var app = new Vue({
			el: '#app',
			data: {
				step: 1,
				is_have_co_applicant: 0
			},
			methods: {
				next: function() {
					if(!this.checkInfo(this.step)) return;
					this.step++;
					var is_have_co_applicant = document.querySelector('input[name=is_have_co_applicant]:checked').value;
					//console.log(is_have_co_applicant);
					//console.log(this.step, this.is_have_co_applicant);
					if(this.step == 4 && is_have_co_applicant == 0) {
						this.step = 5
					}
					if(isMobile()) {
						$("html,body").animate({scrollTop:'200px'}, 500);
					}
					if(this.step == 6) {
						var postData = {};
						$('form input, form textarea').each(function(){
							//if($(this).attr('name') != '') {
								if($(this).attr('type') == 'radio'){
									if($(this).is(':checked')){
										postData[$(this).attr('name')] = $(this).val(); 
										console.log($(this).attr('name'));
									}
								}else{
									if($(this).attr('name') != '') {
										postData[$(this).attr('name')] = $(this).val(); 
									}
								}
							//}
						});
						console.log(postData);
						localStorage.setItem('postData', JSON.stringify(postData));
						//console.log(localStorage.getItem('postData'))
						window.location.href = '/Summary';
					}
				},
				back: function() {
					this.step--;
					var is_have_co_applicant = document.querySelector('input[name=is_have_co_applicant]:checked').value;
					//console.log(is_have_co_applicant);
					//console.log(this.step, this.is_have_co_applicant);
					if(this.step == 4 && is_have_co_applicant == 0) {
						this.step = 3
					}
					
				},
				checkInfo: function(step) {
					$('.tips').remove();
					$('input').removeClass('highlight');
					var result = true;
					if(step == 1) {
						var $post_code = $('input[name=property_post_code]');
						// console.log('post code format error'+ $post_code.val());
						if(true){
							if(!/^([A-Z]|\d){6}$/g.test($post_code.val())){

								console.log('post code format error');
								// $post_code.addClass('highlight').after('<span class="tips" style="float:right;margin-right: 5px; margin-top: -16px;color: red;">Format error!</span>');
								$('.post-code input').each(function(){
									$(this).addClass('highlight');
								});
								result = false;
							}
						}
						var email = $('input[name=email_address]').val();
						console.log(email,'email');
						if($.trim(email) != ''){
							if(!/.*@.*/.test(email)){
								$('input[name=email_address]').addClass('highlight');
								result = false;
							}
						}

						var phone =  $('input[name=phone_number]').val();
						console.log(phone);
						if(!/\(\d\d\d\)\d\d\d-\d\d\d/.test(phone)){
							$('.phone-group input').each(function(){
								$(this).addClass('highlight');
							});
							result = false;
						}
						var is_own_this_property = $('input[name=is_own_this_property]:checked').val();
						$('#optips-wrap').html('');
						if(is_own_this_property == 0){
							$('#optips-wrap').html('To get approved, you must own your home!');
							result = false;
						}
						$('.step-1 input').each(function() {
							if($(this).hasClass('validate[required]') && $.trim($(this).val()) == ''){
								$(this).addClass('highlight');//.after('<span class="tips" style="float:right;margin-right: 5px; margin-top: -16px;color: red;">Required</span>');
								result = false;
							}
						});
						return result;
					}else if(step == 2) {
						$('.tips').remove();
						var result = true;
						$('.step-2 input').each(function() {
							if($(this).hasClass('validate[required]') && $.trim($(this).val()) == ''){
								$(this).addClass('highlight');//.after('<span class="tips" style="float:right;margin-right: 5px; margin-top: -16px;color: red;">Required</span>');
								result = false;
							}
						});
						if(!result) return false;

						// var is_have_second_mortage = $('input[name=is_have_second_mortage]:checked').val();
						// if(is_have_second_mortage == 1) {
						// 	$('#smtips-wrap').html('<span class="tips" style="float:right;margin-right: 5px; margin-top: -16px;color: red;">Sorry, we do not lend a third Mortgage!</span>');
						// 	return false;
						// }
						// console.log(is_have_second_mortage,'is_have_second_mortage');

						var property_pstimated_value = parseFloat($('input[name=property_estimated_value]').val().replace(/,/g,''));
						var first_mortgage = parseFloat($('input[name=first_mortgage_balance]').val()) || 0;
						var amount_want_borrow = parseFloat($('input[name=how_much_like_borrow]').val().replace(/,/g,''));
						var result = (amount_want_borrow + first_mortgage)/property_pstimated_value;
						console.log(property_pstimated_value, 'property_pstimated_value');
						console.log(amount_want_borrow, 'amount_want_borrow');
						console.log(result, 'result');
						// if(result > .8){
						// 	$('#hmtips-wrap').html('<span class="tips" style="color:red;">The total loan-to-value cannot exceed 80%.</span>');
      //                      result = false;
						// }
						var current_time = new Date().getTime();
						var when_needed = $('input[name=when_needed]').val();
						if(!/\d\d\d\d-\d\d-\d\d/g.test(when_needed)){
							console.log('格式错误');
							$('input[name=when_needed]').after('<span class="tips" style="color:red;">Format error</span>');
							return false;
						}else{
							console.log('格式正确');
						}
						var when_needed_timestamp = new Date(when_needed + '').getTime();
						console.log(current_time,'current_time');
						console.log(when_needed_timestamp,'when_needed_timestamp');
						console.log(when_needed,'when_needed');
						console.log(when_needed_timestamp - current_time,'period_time');
						console.log(1000*60*60*24*14, '1000*60*60*24*14');

						if(current_time >= when_needed_timestamp){
							$('#wntips-wrap').html('<span class="tips" style="color:red;">You should choose future time.</span>');
							result = false;
						}
						// if((when_needed_timestamp - current_time) < 1000*60*60*24*14){
						// 	//小于14天
						// 	$('#wntips-wrap').html('<span class="tips" style="color:red;">We need at least two weeks to proceed your case. At certain season, this time will be longer.</span>');

						// }
						return result;
					}else if(step == 3) {
						$('.tips').remove();
						var result = true;
						$('.step-3 input').each(function() {
							if($(this).hasClass('validate[required]') && $.trim($(this).val()) == ''){
								$(this).addClass('highlight');//.after('<span class="tips" style="float:right;margin-right: 5px; margin-top: -16px;color: red;">Required</span>');
								result = false;
							}
						});
						return result;
					}else if(step == 4){
						$('.tips').remove();
						var result = true;
						$('.step-4 input').each(function() {
							if($(this).hasClass('validate[required]') && $.trim($(this).val()) == ''){
								$(this).addClass('highlight');//.after('<span class="tips" style="float:right;margin-right: 5px; margin-top: -16px;color: red;">Required</span>');
								result = false;
							}
						});
						return result;
					}else if(step == 5) {
						$('.tips').remove();
						var result = true;
						$('.step-5 textarea').each(function() {
							console.log();
							if($(this).hasClass('validate[required]') && $.trim($(this).val()) == ''){
								$(this).addClass('highlight');//.after('<span class="tips" style="display:block;margin-top:5px;color: red;">Required</span>');
								result = false;
							}
						});
						return result;
					}else if(step == 6) {
						var result = true;
						$('#isAccept-wrap').text('');
						var is_accept = $('input[name=is_accept]:checked').val();
						console.log(is_accept);
						if(is_accept == 0){
							$('#isAccept-wrap').text('Please accept the terms and conditions');
							result = false;
						}
						
						return result;
					}
				},
				have_co_applicant: function(value) {
					console.log(value);
					this.is_have_co_applicant = value;
				}
			}
		});
		$(function(){
			// $('.post-code input').focus(function() {
			// 	$(this).val('')
			// });
			$('.post-code input').on('keypress',function(evt){
				if(evt.keyCode == 8){
					if($(this).val() == ''){
						$(this).prev().focus();
					}
				}else{
					//$(this).next().focus();				
				}
				//$(this).val($(this).val().substring(0,1));
			});
			$('.post-code input').on('keyup',function(evt){
				if(evt.keyCode == 8){
					if($(this).val() == ''){
						$(this).prev().focus();
					}
				}else{
					if($(this).index()%2 == 1) {
						$(this).val($(this).val().replace(/^\D$/ig,''));
					}else{
						$(this).val($(this).val().replace(/^\d$/ig,''));
					}
					if($.trim($(this).val()) != ''){
						$(this).next().focus();
					}	
				} 
				//$(this).val($(this).val().substring(0,1));
			});

			$('.phone-group input').on('keypress',function(evt){
				if(evt.keyCode == 8){
					if($(this).val() == ''){
						$(this).prev().focus();
					}
				}else{
					
					
				}
				// $(this).val($(this).val().substring(0,1));
			});
			$('.phone-group input').on('keyup',function(evt){
				if(evt.keyCode == 8){
					if($(this).val() == ''){
						$(this).prev().focus();
					}
				}else{
					$(this).val($(this).val().replace(/^\D$/g,''));
					if($.trim($(this).val()) != ''){
						$(this).next().focus();				
					}
					//$(this).next().focus();
				}
				// $(this).val($(this).val().substring(0,1));
			});
			$('.number-format,input[name=property_estimated_value],input[name=how_much_like_borrow]').on('keyup',function(evt){
				if($.trim($(this).val()) !=''){
					$(this).val($(this).val().replace(/\D/ig,''));
					if($(this).val() != '') {
						$(this).val(parseInt($(this).val()));
						$(this).val(formatMoney($(this).val(),false));
					}

				}
				console.log($(this).val());
			});
			setInterval(function(){
				var value = '';
				$('.post-code input').each(function(){
					$(this).val($(this).val().substring(0,1).toUpperCase());
					value += $(this).val();
					$(this).parent().next().val(value);
				});
				var _phone = '';
				$('.phone-group input').each(function(){
					$(this).val($(this).val().substring(0,1));
					_phone += $(this).val();
					if( _phone.length >= 10 ) {
						var phone = _phone;
						_phone = '(' + phone.substring(0,3) + ')' + phone.substring(3,6) + '-' + phone.substring(6);	
					}
					$(this).parent().next().val(_phone);

				});
			},50);
			
			$( "#_datepicker" ).datepicker({
				dateFormat: "yy-mm-dd",
				changeMonth: true,
				changeYear: true,
				minDate: new Date()
			});
			$('#_your-birthdate').datepicker({
				dateFormat: 'yy-mm-dd',
				changeMonth: true,
				changeYear: true,
				maxDate: '2008-01-01'
			});
			$('#_co-application-birthdate').datepicker({
				dateFormat: 'yy-mm-dd',
				changeMonth: true,
				changeYear: true,
				maxDate: new Date()
			});
			setTimeout(function(){
				// $('#customer-form').validationEngine({promptPosition : "topLeft", scroll: false});
			},1000);
		});
	</script>
{% endblock %}
